<template>
  <div>
    <!--    面包屑导航区-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="never">
      <el-button type="primary" class="dflex-es" @click="handleAdd">新建分类</el-button>
      <el-table :data="list" border stripe>
        <el-table-column label="ID" width="80px" prop="id" align="center"></el-table-column>
        <el-table-column label="图片" prop="picUrl" width="150px" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.picUrl"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="分类名称" prop="name"></el-table-column>
        <el-table-column label="博客数量" prop="blogCount" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="handleDel(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.pageNum"
          :total="total">
      </el-pagination>
    </el-card>
    <AEditTypeDialog :is-show.sync="isShowPop" :is-edit="isEdit" :info="editInfo"
                     @complete="refresh"></AEditTypeDialog>
  </div>
</template>

<script>
import { reqDelType, reqTypeList } from '../../api/adminApi'
import AEditTypeDialog from '@/views/admin/dialog/AEditTypeDialog.vue'

const defQuery = () => {
  return {
    kwd: '',
    pageNum: 1,
    pageSize: 10
  }
}
export default {
  components: { AEditTypeDialog },
  data() {
    return {
      queryParams: defQuery(),
      list: [],
      total: 0,
      isEdit: false,
      isShowPop: false,
      editInfo: {},
    }
  },
  created() {
    this.getList();
  },
  methods: {
    refresh() {
      this.getList();
    },
    getList() {
      reqTypeList(this.queryParams).then(data => {
        this.list = data.list
        this.total = data.total
      })
    },
    handleDel(row) {
      this.$confirm(
          '是否确认删除',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      ).then(() => {
        reqDelType(row.id).then(data => {
          this.isShowPop = false
          this.$message.success('删除成功')
          this.refresh()
        })
      })
    },
    handleAdd() {
      this.isEdit = false
      this.editInfo = {}
      this.isShowPop = true
    },
    handleEdit(row) {
      this.isEdit = true
      this.editInfo = row
      this.isShowPop = true
    },
    handleCurrentChange(pageNum) {
      this.queryParams.pageNum = pageNum
      this.getList()
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.getList()
    },
  },
}
</script>

<style scoped>

</style>
